<template>
<div class="main">
  <div class="jumbotron">
    <div class="wh jumbotron-inner"  v-html="header.resContent"></div>
    <div class="lang">
      <div class="lang_2"></div>
    </div>     
  </div>
  <div class="w"> 
    <a-row :gutter="30" >
      <a-col :xs=0 :sm=0 :md=0 :lg=6 :xl=6>
        <a-affix :offsetTop="90">
          <div class="tree boxshw">
            <h4 class="tree-tit">关于</h4>
            <div class="tag">
              <a-anchor v-if="about.length > 0"  :affix="false" :target-offset="90" :showInkInFixed="false">
                <a-anchor-link v-for="(item,index) in about" :key="item.id" class="list-group-item"  :href="'#'+index" :title="item.title" />              
              </a-anchor> 
            </div>
          </div>  
        </a-affix>   
      </a-col>
      <a-col v-if="content && content.length > 0" :xs=24 :sm=24 :md=24 :lg=18 :xl=18  class="about">
        <h3 id="0">{{content[0].title}}</h3>
        <div class="timeline">
          <a-timeline mode="alternate">
            <a-timeline-item v-for="(item,index) in upDataLog" :key="index" :color="item[1]">
              <template #dot>
              <ClockCircleOutlined v-if="item[0] != 0" class="up-icon" :style="{color:item[1]}" />
              </template>
              <span v-html="item[2]"></span>
            </a-timeline-item>
          </a-timeline>
        </div>				
        <h3 id="1">{{content[1].title}}</h3>
        <div class="asw" v-html = "content[1].content"></div>
        <h3 id="2">{{content[2].title}}</h3>
        <div class="asw asw-about" v-highlight v-html = "content[2].content"></div>      
      </a-col>
    </a-row>
  </div>
</div>
</template>
<script>
import axios from "@/global/axios";
import api from "@/global/api";
import { reactive,toRefs,onMounted } from 'vue';
import {ClockCircleOutlined} from '@ant-design/icons-vue'
export default {
  components: {ClockCircleOutlined},  
  setup(){
    const aboutData = reactive({
      host:api.host,
      header:'',
      about:'',
      content:'',
      upDataLog:[]
    });
    onMounted( async () => {
      let _channel = {channel:'about'};
      let res = await axios.get(api.getChannel,{params:_channel});
      let pageData = res.data.pageData;
      aboutData.header = pageData.header;
      aboutData.about = pageData.about;
      let ids = pageData.about.map( item => {return item.id});
      let content = await axios.post(api.getContentDetail,{ids});
      aboutData.content = content.data;
      setUpdateData();
    }); 
    const setUpdateData = ()=>{
			let _content = aboutData.content[0].content;
			_content = _content.replace(/\s+/g,'');
			_content = _content.replace(/<\/td>/g,',');
			let _contStr = _content.replace(/<[^>]+>/g,'');
			let _contArr = _contStr.split(',');
			_contArr.length = _contArr.length - 1;
			let groupedArray = group(_contArr, 3);
			aboutData.upDataLog = groupedArray;      
    };
    const group = (array, subGroupLength)=>{
      let index = 0;
      let newArray = [];
      while(index < array.length) {
      	newArray.push(array.slice(index, index += subGroupLength));
      }
      return newArray;
  	}	
    return {
      ...toRefs(aboutData),
    }     
  }
}
</script>

<style scoped>
.jumbotron { margin: 0 0 20px 0; color: #fff; position:relative; height:190px; background:#2EA7E0 url(../assets/banner.png) no-repeat; background-size:cover;}
.jumbotron-inner{ height:190px; background-size:contain;}
.lang {overflow:hidden;width:100%; position:absolute;left:0;opacity:.58;bottom:0;}
.lang_1 {background:url(../assets/banner-b.png) repeat-x;width:4500px;height:60px;animation:langs 12s infinite linear;position:absolute;top:0;}
.lang_2 {background:url(../assets/banner-t.png) repeat-x;width:4500px;height:55px;animation:langs 18s infinite linear;position:relative;top:0;}
@keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}
@-webkit-keyframes langs {0% {margin-left:0}
100% {margin-left:-1938px}
}
.jumbotron >>> h1{ font-size:40px; font-weight:normal; margin:40px 0 20px 0; padding:0;}
.jumbotron >>> h4{ font-weight:normal; margin:0; font-size:15px; letter-spacing:1px;}
.tree{ background:#fff;  overflow:hidden;}
.tree-tit{ height:50px; margin:0; line-height:52px; padding-left:20px; overflow:hidden; font-size:16px; border-bottom:1px solid #EFEFEE;}
.list-group-item{ height:40px; display:block; line-height:40px; padding:0 20px; }
.tag{ padding:15px 10px; overflow:hidden;}
.tag >>> .ant-anchor-ink{ display:none;}
.tag >>> .ant-anchor-link-title{ font-size:16px;}
.about {padding:0 20px 50px; margin-bottom:20px; background-color: #fff; box-shadow: 2px 2px 3px #ccc;}
.about h3 {color: #333; font-size: 18px; border-bottom: 1px solid #eee; padding: 25px 0 15px; margin: 0 0 10px 0;}
.timeline{ padding:20px 0;}
.timeline >>> .ant-timeline-item-head{ margin-top:-1px; margin-left:-4px; width:10px; height:10px;}
.timeline >>> .up-icon{font-size: 15px; margin-left:2px;}
.asw >>> .t{  height:45px; line-height:45px;}
.asw >>> .url{color: #b2b2b2;font-size:14px; padding-left:10px; border-left: 4px solid #ebebeb; line-height:30px;}
.asw >>> code{ font-family:"Courier New", Courier, monospace; line-height:1.4; font-size:16px;}
.asw-about >>> .url{ margin-bottom:10px;}
</style>
